import Button from "@/components/Button";
import Title from "@/components/Title";
import { useState } from "react";

const datas = [
    {
        title: "电商出海",
        children: [
            {
                title: "带货视频批量生产",
                desc: "高效制作，智能化内容生产引擎",
                details: [
                    {
                        title: "商家专属素材库",
                        desc: "对全网爆款进行像素级逐帧式拆解，建立分行业化的视频、文案、关键词库，实现精品内容的流水线式生产",
                    },
                    {
                        title: "智能剪辑",
                        desc: "历经万次级实践优化，独创“3512”和“1510”爆款视频结构，孕育出“智能混剪”与“智能精剪”剪辑模式，双管齐下层叠式优化视频质量",
                    },
                    {
                        title: "批量生产",
                        desc: "生产侧集合算力资源，单位时间生产效率提升200倍，实现产能迸进式跃迁，引领商业视频生产力革命",
                    },
                    {
                        title: "AI大模型",
                        desc: "深度挖掘并适应各大平台的推荐算法，打造专属的AI内容生成引擎，利用AI算法深度解析市场动态，建立个性化动态式的AI生成全案",
                    },
                ],
            },
            {
                title: "带货内容一键出海",
                desc: "全球化布局，简化跨境营销",
                details: [
                    {
                        title: "运营商战略合作",
                        desc: "与中国移动建立深度战略合作，线路Cover全球主要网络节点，确保用户出海合规",
                    },
                    {
                        title: "矩阵管理",
                        desc: "利用自主研发的数字员工，将单人管理账号数量极限提升至500+，打造专属的全域自动化运营模式",
                    },
                    {
                        title: "商品链接批量部署",
                        desc: "通过自动化SOP赋能，实现带货视频与商品链接的快速捆绑后分发，大幅提升内容转化率",
                    },
                    {
                        title: "一键发布",
                        desc: "利用平台规则进行私有化设置，实现带货内容向账号侧个性化分配，一键点击同时发布，全时段进军全球内容平台",
                    },
                ],
            },
        ],
    },
    {
        title: "创作者出海",
        children: [
            {
                title: "智能生产工具助力",
                desc: "创意实现，一键生成",
                details: [
                    {
                        title: "AI视频生成",
                        desc: "利用机器学习（Machine Learning, ML）和深度学习（Deep Learning, DL）技术，将文本与图像无缝融合，将创意构想迅速转化为视觉现实",
                    },
                    {
                        title: "AI视频工具",
                        desc: "搭载12大核心模块，贯穿创意生成至成片渲染的全生命周期，全面驱动创意革新与效能升级",
                    },
                    {
                        title: "智能素材剪辑",
                        desc: "采用前沿AI算法，实现个性化视频剪辑，文案、配音、字幕、转场等全元素一键集成，打造专业级视频效果",
                    },
                    {
                        title: "广域智能分发",
                        desc: "无缝对接抖音、快手、TikTok、YouTube等国际流量巨头，实现内容的全球性触达，引爆内容曝光率",
                    },
                ],
            },
            {
                title: "内容变现渠道赋能",
                desc: "多元化收入，稳定增长",
                details: [
                    {
                        title: "变现教学",
                        desc: "利用前沿AI算法+10年实战经验，提供定制化的内容变现路径，提供保姆式、陪跑式指导，实现收益的极速增长",
                    },
                    {
                        title: "工具赋能",
                        desc: "整合尖端AI工具与创新玩法，从内容创作到发布，提供一站式全链路解决方案，打造内容变现的超级引擎",
                    },
                    {
                        title: "独家版权",
                        desc: "掌握独家影视、短剧、音乐版权，构建内容变现的护城河，确保收益的稳定性和最大化",
                    },
                    {
                        title: "机构加持",
                        desc: "与国内外多家MCN机构组成战略同盟，保障国内外平台的结算通道顺畅无阻，提升变现效率",
                    },
                ],
            },
        ],
    },
];

const Tabs = () => {
    const [active, setActive] = useState(0);
    return (
        <div className="w-full flex flex-col items-center">
            <ul className="flex items-center justify-center *:text-2xl">
                {datas.map((item, index) => (
                    <li
                        key={index}
                        className={`${
                            active === index
                                ? "text-blue border-b-blue"
                                : "border-b-transparent"
                        } cursor-pointer border-b-4 py-5 px-6`}
                        onClick={() => setActive(index)}
                    >
                        {item.title}
                    </li>
                ))}
            </ul>
            <div className="laptop:hidden w-full">
                {datas[active].children.map((child, index) => (
                    <div key={index}>
                        <Title size="sm" desc={child.desc}>
                            {child.title}
                        </Title>
                        <Panel
                            active1={active}
                            active2={index}
                            details={child.details}
                        />
                    </div>
                ))}
            </div>
            <div className="w-full hidden laptop:block">
                <TabContent active={active} />
            </div>
        </div>
    );
};

const Panel: React.FC<{
    active1: number;
    active2: number;
    details: { title: string; desc: string }[];
}> = ({ active1, active2, details }) => {
    return (
        <ul className="flex grow relative laptop:rounded-xl px-8 py-2 bg-[rgba(255,255,255,0.8)] backdrop-filter backdrop-blur-[1.2rem] drop-shadow-[0_0_50px_rgba(180,194,222,0.3)] flex-col after:absolute after:top-0 after:bottom-0 after:left-0 after:right-0 after:bg-[url('/jubaopen/pt.png')] after:origin-bottom-right after:bg-cover after:opacity-20 after:bg-no-repeat">
            {details.map((detail, index) => (
                <li
                    key={index}
                    className="py-5 flex items-center gap-4 [&:not(:last-child)]:border-b-slate-200 [&:not(:last-child)]:border-b"
                >
                    <img
                        className="w-10 h-10"
                        src={`/jubaopen/icon-${active1}-${active2}-${index}.svg`}
                        alt=""
                    />
                    <div>
                        <h4 className="text-base font-bold mb-2">
                            {detail.title}
                        </h4>
                        <p className="text-gray-500 text-xs">{detail.desc}</p>
                    </div>
                </li>
            ))}
        </ul>
    );
};

const TabContent: React.FC<{ active: number }> = ({ active: parentActive }) => {
    const data = datas[parentActive];
    const [active, setActive] = useState(0);
    const child = data.children[active];
    return (
        <div className="w-full py-8 bg-[url('/jubaopen/bg.png')] bg-left bg-contain bg-no-repeat">
            <div className="flex items-center max-w-6xl m-auto px-6">
                <div
                    className={`w-64 *:grow border-l flex flex-col shrink-0 items-start justify-center border-l-white *:h-[5.6rem] *:pl-6 *:pr-11 *:py-4 relative after:absolute after:border-l-white after:border-l-[5px] after:-left-1 after:right-0 after:h-[5.6rem] after:bg-gradient-to-r after:from-[rgba(92,154,255,0.50)] after:from-30% after:to-[rgba(105,162,255,0)] ${
                        active === 0 ? "after:top-0" : "after:top-[5.6rem]"
                    } after:transition-[top]`}
                >
                    {data.children.map((item, index) => (
                        <div
                            className="relative z-10 cursor-pointer"
                            key={index}
                            onClick={() => setActive(index)}
                        >
                            <div className="text-xl font-bold text-font-blue-300">
                                {item.title}
                            </div>
                            <div className="text-font-blue-300 text-xs">
                                {item.desc}
                            </div>
                        </div>
                    ))}
                </div>
                <Panel
                    active1={parentActive}
                    active2={active}
                    details={child.details}
                />
            </div>
        </div>
    );
};

const Jubaopen = () => {
    return (
        <div className="overflow-hidden flex flex-col items-center bg-[#F3F7FF] pb-10 laptop:pb-[6rem]">
            <Title desc="连接创意与市场，一站式解决内容生产、分发与变现">
                聚宝盆——跨境电商与内容出海的智能解决方案
            </Title>
            <Tabs />
            <Button className="mt-10">预约演示</Button>
        </div>
    );
};

export default Jubaopen;
